<script setup lang="ts">
const props = defineProps(['data'])
let data = props.data
</script>

<template>
  <scroll-view scroll-y class="scrollView">
    <view class="item" v-for="item in data" :key="item.id">
      <view class="itemImg">
        <image :src="item.avatar" mode="scaleToFill" v-if="item.avatar" class="avatar" />
        <image src="@/static/My/avatar.png" mode="scaleToFill" v-else class="avatar" />
      </view>
      <view class="itemContent">
        <view class="contentName">
          <image src="@/static/My/man.png" mode="scaleToFill" class="sex" v-if="item.sex === 'M'" />
          <image
            src="@/static/My/women.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.sex === 'F'"
          />
          {{ item.name }}
        </view>
        <view class="contentInfo">{{ `${item.age}岁/ ${item.height}cm / ${item.address}` }}</view>
      </view>
      <view class="itemTime"> 1小时前 </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.scrollView {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;

  .item {
    width: 95%;
    height: 80rpx;
    margin: 0 auto;
    margin-bottom: 2%;
    display: flex;
    padding: 0 0 3% 0;
    box-sizing: border-box;
    justify-content: space-between;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
    }

    .itemContent {
      width: 60%;

      .contentName {
        font-size: 32rpx;
        font-weight: 500;

        .sex {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .contentInfo {
        font-size: 24rpx;
        color: #999;
        margin: 4rpx 0px;
      }
    }

    .itemTime {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
